import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link , hashHistory, IndexRoute} from 'react-router';
import styles from '../../style.css';
import Example1 from '../jsx/example1';
import Example2 from '../jsx/example2';
import Example3 from '../jsx/example3';
import Example4 from '../jsx/example4';
import Example5 from '../jsx/example5';
import Example6 from '../jsx/example6';

export default class App extends React.Component{
  render(){
    return (
      <div>
        <ul className={styles.app}>
          <li><Link to="/e1">Example1</Link></li>
          <li><Link to="/e2">Example2</Link></li>
          <li><Link to="/e3">Example3</Link></li>
          <li><Link to="/e4">Example4</Link></li>
          <li><Link to="/e5">Example5</Link></li>
          <li><Link to="/e6">Example6</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}

class Dashboard extends React.Component{
  render() {
    return <div className={styles.app}>Welcome to the app!</div>
  }
}

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      {/* 当 url 为/时渲染 Dashboard */}
      <IndexRoute component={Dashboard} />
      <Route path="e1" component={Example1} />
      <Route path="e2" component={Example2} />
      <Route path="e3" component={Example3} />
      <Route path="e4" component={Example4} />
      <Route path="e5" component={Example5} />
      <Route path="e6" component={Example6} />
    </Route>
  </Router>
), document.getElementById('content'));